<template>
  <div class="big">
    <div class="top">
      <el-button color="rgb(23,28,73)" @click="goBack">返回</el-button>
      <el-breadcrumb :separator-icon="ArrowRight" class="saleMenu">
        <el-breadcrumb-item :to="{ path: '/sale/list' }">
          售后管理
        </el-breadcrumb-item>
        <el-breadcrumb-item> 售后详情 </el-breadcrumb-item>
      </el-breadcrumb>
      <div class="saleData">
        <span>状态：待审核</span>
        <span>申请时间&emsp;2022-12-07&emsp;10:58:32</span>
      </div>
      <el-button
        color="rgb(23,28,73)"
        class="funBtn"
        @click="goBack(), confirmPass()"
        >通过</el-button
      >
      <el-button
        color="rgb(153,153,153)"
        @click="goBack(), refuse()"
        class="funBtn"
        >拒绝</el-button
      >
    </div>
    <div class="bottom">
      <div class="buyerData">
        <p>买家信息</p>
        <ul>
          <li>账号ID/微信名称:&emsp;{{ list.idName }}</li>
          <li>手机号码:&emsp;{{ list.relation }}</li>
          <li>下单时间:&emsp;{{ list.dates }}</li>
          <li>
            微信支付商户订单号:&emsp; <span>{{ list.wxorder }}</span>
          </li>
          <li>
            商品详情:&emsp;
            <span>{{ list.details }}</span>
          </li>
        </ul>
      </div>
      <div class="applyDetail">
        <p>申请详情</p>
        <ul>
          <li>售后类型:&emsp;{{ list.refundType }}</li>
          <li>商品类型:&emsp;{{ list.commodityTpe }}</li>
          <li>美物订单编号:&emsp;266633264161613</li>
          <li>1688订单编号:&emsp;266633264161613</li>
          <li>实付款:&emsp;￥{{ list.actualPay }}</li>
          <li>联系方式:&emsp;{{ list.relation }}</li>
          <li>退款说明:&emsp;尺寸不符合</li>
          <li>图片凭证:</li>
        </ul>
        <div class="imgData">
          <div>
            <img :src="list.img" alt="" style="width: 100%; height: 100%" />
          </div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="markRecord">
        <p>后台备注记录</p>
        <el-table style="width: 100%" border>
          <el-table-column label="时间" />
          <el-table-column label="备注人" />
          <el-table-column label="备注信息" />
        </el-table>
      </div>
      <div class="mark">
        <p>后台备注</p>
        <div>款已退回</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ArrowRight } from "@element-plus/icons-vue";
import { notiFication } from "@/utils/message.js";
import { useOrderData } from "../../stores/allOrder";
import { ref } from "vue";
const { list } = useOrderData();

const router = useRouter();
// 点击返回上一级路由
const goBack = () => {
  router.back(1);
};

// 点击通过，判断通过成功与否
const confirmPass = () => {
  notiFication("操作成功", "success");
};

// 点击拒绝
const refuse = () => {
  notiFication("拒绝成功", "success");
};
</script>

<style lang="less" scoped>
//
.big {
  width: 1310px;
  height: 1460px;
  margin-top: 20px;
  padding: 10px 0 0 10px;
  background: rgb(241, 245, 251);
  .top {
    width: 860px;
    display: flex;
    height: 40px;
    .el-button {
      height: 100%;
      box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
      margin-left: 10px;
    }
    .funBtn {
      width: 90px;
    }
    div {
      height: 100%;
      border-radius: 5px;
      background: #fff;
      box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
      margin-left: 10px;
    }
    .saleMenu {
      width: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .saleData {
      width: 370px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
  .bottom {
    width: 1220px;
    height: 90%;
    background: #fff;
    margin: 10px;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
    .buyerData,
    .applyDetail {
      width: 1220px;
      border-radius: 5px;
      border: 2px solid rgb(242, 242, 242);
      p {
        width: 1190px;
        height: 35px;
        line-height: 35px;
        padding-left: 30px;
        font-weight: 700;
        background: rgb(242, 242, 242);
      }
      ul {
        margin-left: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        li {
          display: flex;
          font-weight: 700;
          font-size: 12px;
          span {
            display: block;
            width: 210px;
            font-weight: 400;
          }
        }
      }
    }
    .buyerData {
      height: 310px;
      ul {
        height: 250px;
      }
    }
    .applyDetail {
      height: 490px;
      margin-top: 40px;
      ul {
        height: 300px;
      }
      .imgData {
        width: 300px;
        padding-left: 30px;
        display: flex;
        justify-content: space-around;
        div {
          width: 80px;
          height: 80px;
          background: rgb(242, 242, 242);
        }
      }
    }
    .markRecord {
      width: 740px;
      margin-top: 50px;
      p {
        width: 100px;
        height: 30px;
        line-height: 30px;
        font-weight: 700;
        margin-left: 10px;
      }
      .el-table {
        border-radius: 5px;
        --el-table-header-bg-color: rgb(242, 242, 242);
      }
    }
    .mark {
      width: 1220px;
      height: 200px;
      margin-top: 50px;
      border-radius: 5px;
      border: 2px solid rgb(242, 242, 242);
      p {
        width: 1190px;
        height: 35px;
        line-height: 35px;
        padding-left: 30px;
        font-weight: 700;
        background: rgb(242, 242, 242);
      }
      div {
        padding: 30px;
      }
    }
  }
}
</style>
